<script setup lang="ts">/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
import {StoreForm} from "@/api/store/types";

defineOptions({
	name: "OmsReturnOrder",
	inheritAttrs: false,
});
import lodash from 'lodash-es'
import {
	getReturnOrderPage
} from "@/api/omsReturnOrder";

import {listAll} from "@/api/store";

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const ids = ref([]);
const monthList = ref<[]>([]);
const storeList = ref<StoreForm[]>();
const total = ref(0);

const queryParams = reactive<any>({
	pageNum: 1,
	pageSize: 20,
});
const billColumnList = ref<[]>();



/**
 * 查询
 */
function handleQuery() {
	loading.value = true;
	if (lodash.size(monthList.value) > 0){
		lodash.set(queryParams, 'startMonth', monthList.value[0])
		lodash.set(queryParams, 'endMonth', monthList.value[1])
	}
	getReturnOrderPage(queryParams)
		.then(({data}) => {
			billColumnList.value = data.list;
			total.value = data.total;
		})
		.finally(() => {
			loading.value = false;
		});
}

/** 重置查询 */
function resetQuery() {
	queryParams.pageNum = 1;
	handleQuery();
}

/**
 * 获取所有店铺
 */
function getAllStore() {
	listAll().then((response) => {
		storeList.value = []
		const group_store = lodash.groupBy(response.data, 'storeKeyName');
		for (let key in group_store) {
			storeList.value.push({'label': key, 'options': group_store[key]})
		}
	})
}

onMounted(() => {
	let now = new Date()
	let month = now.getMonth()
	let nowMonth;
	if (month < 9){
		nowMonth = now.getFullYear() + '0' + (now.getMonth() + 1) + ''
	}	else {
		nowMonth = now.getFullYear() + '' + (now.getMonth() + 1) + ''
	}
	monthList.value = [nowMonth, nowMonth]
	getAllStore()
	handleQuery(); // 初始化标准账单配置列表数据
});
</script>

<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col>
				<div class="search-container">
					<el-form ref="queryFormRef" :model="queryParams" :inline="true">
						<el-form-item label="退货创建月份">
							<el-date-picker
									style="width: 180px"
									v-model="monthList"
									type="monthrange"
									range-separator="至"
									start-placeholder="开始月份"
									end-placeholder="结束月份"
									value-format="YYYYMM"
									:clearable="false"
							/>
						</el-form-item>
						<el-form-item label="退货编号" prop="returnNo">
							<el-input
									v-model="queryParams.returnNo"
									placeholder="请输入退货编号"
									clearable
									style="width: 170px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item label="店铺" prop="storeId">
							<el-select class="yz-el-select" v-model="queryParams.storeId" filterable clearable placeholder="请选择店铺">
								<el-option-group
									v-for="group in storeList"
									:key="group.label"
									:label="group.label"
								>
									<el-option
										v-for="item in group.options"
										:key="item.id"
										:label="item.innerSystemStoreName"
										:value="item.id"
									/>
								</el-option-group>
							</el-select>
						</el-form-item>
						<el-form-item label="关联订单号" prop="linkNo">
							<el-input
									v-model="queryParams.linkNo"
									placeholder="请输入关联订单号"
									clearable
									style="width: 170px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item label="退单交易号" prop="returnTradeNo">
							<el-input
									v-model="queryParams.returnTradeNo"
									placeholder="请输入退单交易号"
									clearable
									style="width: 170px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item label="原始交易号" prop="originalNo">
							<el-input
									v-model="queryParams.originalNo"
									placeholder="请输入原始交易号"
									clearable
									style="width: 170px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="resetQuery"
							><i-ep-search />搜索</el-button
							>
							<el-button @click="resetQuery">
								<i-ep-refresh />
								重置</el-button
							>
						</el-form-item>
					</el-form>
				</div>

				<el-card shadow="never">

					<el-table
							size="small"
							:height="billColumnList && billColumnList.length > 0 ? 590 : 150"
							v-loading="loading"
							:data="billColumnList"
							border
					>
						<el-table-column
								label="唯一标识"
								align="center" show-overflow-tooltip
								prop="pid"
								width="150"
						/>
						<el-table-column
								label="退单编号"
								align="center" show-overflow-tooltip
								prop="returnNo"
								width="150"
						/>
						<el-table-column
								label="店铺"
								width="150"
								align="center" show-overflow-tooltip
								prop="storeName"
						/>
						<el-table-column
								label="关联订单号"
								width="180"
								align="center" show-overflow-tooltip
								prop="linkNo"
						/>

						<el-table-column
								label="订单支付时间"
								width="140"
								align="center" show-overflow-tooltip
								prop="purchasedTime"
						/>

						<el-table-column
								label="退单交易号"
								width="120"
								align="center" show-overflow-tooltip
								prop="returnTradeNo"
						/>
						<el-table-column
								label="原始交易号"
								align="center" show-overflow-tooltip
								prop="originalNo"
								width="100"
						/>
						<el-table-column
								label="退单类型"
								align="center" show-overflow-tooltip
								prop="returnType"
								width="140"
						/>
						<el-table-column
								label="退单状态"
								align="center" show-overflow-tooltip
								prop="status"
								width="100"
						/>
						<el-table-column
								label="退货创建时间"
								align="center" show-overflow-tooltip
								prop="returnTime"
								width="140"
						/>
						<el-table-column
								label="入库时间"
								align="center" show-overflow-tooltip
								prop="storageTime"
								width="140"
						/>
						<el-table-column
								label="品牌"
								align="center" show-overflow-tooltip
								prop="brand"
								width="150"
						/>
						<el-table-column
								label="商品名称"
								align="center" show-overflow-tooltip
								prop="productName"
								width="150"
						/>
						<el-table-column
								label="条码（商品SKU）"
								align="center" show-overflow-tooltip
								prop="productCode"
								width="150"
						/>
						<el-table-column
								label="数量"
								align="center" show-overflow-tooltip
								prop="qty"
								width="120"
						/>
						<el-table-column
								label="实退金额小计"
								align="center" show-overflow-tooltip
								prop="returnAmount"
								width="150"
						/>
						<el-table-column
								label="平台退单编号"
								align="center" show-overflow-tooltip
								prop="refundCode"
								width="120"
						/>
						<el-table-column
								label="PO"
								align="center" show-overflow-tooltip
								prop="po"
								width="100"
						/>
						<el-table-column
								label="关联原始交易号"
								align="center" show-overflow-tooltip
								prop="linkOriginalNo"
								width="100"
						/>
						<el-table-column
								label="ERP单号"
								align="center" show-overflow-tooltip
								prop="erpNo"
								width="100"
						/>
					</el-table>

					<pagination
							v-if="total > 0"
							v-model:total="total"
							v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize"
							@pagination="handleQuery"
					/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
